<template>
	<!-- 我的/设置中心 -->
  <view class="page page-fill">
    <view class="page-block info-list">
      <!-- 头像 -->
      <!-- @click="operator" -->
      <view class="item-wapper face-line-upbottom">
        <view class="info-words">我的头像</view>
        <view class="right-wapper">
          <image
            mode="aspectFill"
            :src="userInfo.headimgurl"
            class="face"
          ></image>
          <view class="arrow-block">
            <u-icon class="ico" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>

      <!-- 昵称 -->
      <view class="item-wapper" @click="modifyNickName">
        <view class="info-words">我的昵称</view>

        <view class="right-wapper">
          <view class="gray-fields">
            {{ userInfo.nickname }}
          </view>
          <view class="arrow-block">
            <u-icon class="ico" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>

      <view @click="aboutUs" class="item-wapper">
        <view  class="info-words">关于我们</view>

        <view class="right-wapper">
          <view class="gray-fields"> </view>
          <view class="arrow-block">
            <u-icon class="ico" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },

  onShow() {
    var res = uni.getStorageSync("member");
    this.userInfo = res;
  },
  methods: {
    aboutUs() {
      uni.navigateTo({
        url: `/package/pages/webView/webView?name=关于我们&url=https://web.xujiekeji.com/download/aboutUs.html`,
      });
    },

    // 修改昵称
    modifyNickName() {
      // uni.navigateTo({
      // 	url: '/package/pages/my/setting/meNickname'
      // })
    },
  },
};
</script>

<style>
.ico {
  color: #999999;
}

/* 页面铺满屏幕 */
.page-fill {
  width: 100%;
  height: 100%;
  position: absolute;
}

.info-list {
  padding: 0rpx 30rpx;
}

.info-words {
  color: #333;
  font-size: 14px;
  width: 25%;
  line-height: 80rpx;
}

.face {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.arrow-block {
  margin-left: 10rpx;
  line-height: 86rpx;
}

.arrow-ico {
  width: 30rpx;
  height: 30rpx;
}

.item-wapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: 1px solid #f8f5f5;
}

.face-line-upbottom {
  /* margin-top: 20rpx; */
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.right-wapper {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.gray-fields {
  font-size: 14px;
  color: darkgray;
  line-height: 80rpx;
}

/* 底部操作 start */
.footer-wapper {
  display: flex;
  flex-direction: column;
  padding: 20rpx 32rpx;
}

.footer-words {
  width: 100%;
  text-align: center;
  background-color: white;
  font-size: 16px;
  margin-top: 40rpx;
}

/* 底部操作 end */
</style>
